<template>
	<!-- <div class="bgContainer"> -->
	<div class="nodeContainer">
		<div class="nodeHeader">
			<div style="display: inline-block; margin-right: 10px">
				<span style="font-size: 15px">类型：</span>
				<el-select v-model="Typevalue" :clearable="true" placeholder="请选择类型">
					<el-option v-for="item in TypeOptions" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</div>
			<div style="display: inline-block; margin-right: 10px">
				<span style="font-size: 15px">连接状态：</span>
				<el-select v-model="Linkvalue" :clearable="true" placeholder="请选择连接状态">
					<el-option v-for="item in LinkOptions" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</div>
			<div style="display: inline-block; margin-right: 10px">
				<span style="font-size: 15px">系统最高告警状态：</span>
				<el-select v-model="Levelvalue" placeholder="请选择系统最高告警状态" :clearable="true">
					<el-option v-for="item in LevelOptions" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
			</div>
			<div style="display: inline-block;margin-top:10px">
				<span style="font-size: 15px">检索IP节点：</span>
				<el-select v-model="SearchIP" placeholder="请选择IP节点" :clearable="true" filterable>
					<el-option v-for="item in SearchIPOptions" :key="item.label" :label="item.value"
						:value="item.value">
						<!-- {{ '类型：'+ item.label +' -- '+'IP：'+item.value }} -->
					</el-option>
				</el-select>
			</div>
		</div>
		<!-- :row-class-name="tableRowClassName" -->
		<el-table :data="tableDataFn" style="width: 100%" :stripe="true" :default-sort="defaultSort" :header-cell-style="{
          background:'#E0E0E0'
        }">
			<el-table-column type="index" width="50" label="序号"></el-table-column>
			<template v-for="item in tableColumns">
				<el-table-column :prop="item.prop" :sortable="item.sortable" :label="item.label" :width="item.width"
					v-if="item.isShow" :key="item.prop" align="center">
					<template v-slot="scope">
						<template v-if="item.format == 'LinkState'">
							<div v-if="scope.row[item.prop] == 'Y'">
								<el-tooltip :disabled="false" content="系统与该设备正常连接" placement="top" effect="light">
									<i style="color: #00ff00; font-size: 20px;cursor: pointer"
										class="el-icon-circle-check"></i>
								</el-tooltip>
							</div>
							<div v-else>
								<el-tooltip :disabled="false" content="系统与该设备无法连接" placement="top" effect="light">
									<i style="color: red; font-size: 20px;cursor: pointer" class="el-icon-circle-close"></i>
								</el-tooltip>
							</div>
						</template>
						<template v-else-if="item.format == 'getState'">
							<div v-if="scope.row[item.prop] == 'Y'">
								<el-tooltip :disabled="false" content="数据采集正常" placement="top" effect="light">
									<i style="color: #00ff00; font-size: 20px;cursor: pointer"
										class="el-icon-circle-check"></i>
								</el-tooltip>
							</div>
							<div v-else>
								<el-tooltip :disabled="false" content="数据采集异常" placement="top" effect="light">
									<i style="color: red; font-size: 20px;cursor: pointer" class="el-icon-circle-close"></i>
								</el-tooltip>
							</div>
						</template>
						<template v-else-if="item.format == 'handle'">
							<el-tag color="#34495e" effect="dark" style="cursor: pointer"
								@click="viewItemMonitor(scope.row)" v-if="scope.row.type!=='Monitor'">详情</el-tag>
						</template>
						<template v-else-if="item.format == 'table'">
							<el-tag color="#34495e" effect="dark" style="cursor: pointer"
								v-if="scope.row.type!=='Monitor'" @click="viewItemchart(scope.row)">图表</el-tag>
					 	</template>
						<template v-else-if="item.format == 'Level'">
							<template v-if="scope.row.maxAlertlevel === '0'">
								<el-tag style="cursor: pointer" type="success">无告警</el-tag>
							</template>
							<template v-if="scope.row.maxAlertlevel === '2'">
								<el-tag @click="rowDblclick(scope.row)" style="cursor: pointer" type="warning">警告
								</el-tag>
							</template>
							<template v-if="scope.row.maxAlertlevel === '3'">
								<el-tag @click="rowDblclick(scope.row)" style="cursor: pointer" type="danger">紧急
								</el-tag>
							</template>
						</template>
						<template v-else-if="item.format == 'Type'">
							<vIconFont :itemType="scope.row[item.prop]" />
						</template>
						<template v-else>
							<div>
								{{ scope.row[item.prop] }}
							</div>
						</template>
					</template>
				</el-table-column>
			</template>
		</el-table>
		<!-- <v-pagination
        :dataTotal="postData.dataTotal"
        :curPage="postData.curPage"
        :pageSize="postData.pageSize"
        @getCurPage="getPaginationCurPage"
        @getPageSize="getPaginationPageSize"
      >
      </v-pagination> -->
	</div>
	<!-- </div> -->
</template>

<script>
	import tableColumns from "./UsabilityColumns";
	import {
		getNodeUsability
	} from "@/api/index.js";
	import vPagination from "common/Pagination.vue";
	import bus from "common/bus.js";
	import {
		UpdateItem,
		GetItem,
		DeleteItem,
		AddItem
	} from "@/utils/dataStore";
	import vIconFont from './component/iconfont.vue'
	export default {
		components: {
			vPagination,
			vIconFont
		},
		// filters:{
		//   filterType:function(value){
		//     let type = {
		//       ["Oracle"]:'Oracle数据库',
		//       ["SQLServer"]:'SQLServer数据库',
		//       ["Mysql"]:'Mysql数据库',
		//       ["Windows"]:'Windows服务器',
		//       ["Linux"]:'Linux服务器',
		//       ["Network"]:'网络设备',
		//       ["AIX"]:'AIX',
		//       ["Monitor"]:'监控设备',

		//     }
		//     return type[value]
		//   }
		// },
		created() {
			this.getTableData();
		},
		data() {
			return {
				tableColumns: tableColumns,
				tableData: [],
				postData: {
					curPage: 1,
					pageSize: 100000,
					dataTotal: 0,
				},
				defaultSort: {
					prop: "connectstate",
					order: "ascending",
				},
				LinkOptions: [{
						value: "Y",
						label: "正常",
					},
					{
						value: "N",
						label: "断连",
					},
					{
						value: "O",
						label: "正在连接",
					},
					{
						value: "",
						label: "全部",
					},
				],
				LevelOptions: [{
						value: "3",
						label: "紧急",
					},
					{
						value: "2",
						label: "普通",
					},
					{
						value: "0",
						label: "无告警",
					},
					{
						value: "",
						label: "全部",
					},
				],
				TypeOptions: [{
						value: "Oracle",
						label: "Oracle",
					},
					{
						value: "SQLServer",
						label: "SQLServer",
					},
					{
						value: "Mysql",
						label: "Mysql",
					},
					{
						value: "Windows",
						label: "Windows服务器",
					},
					{
						value: "Linux",
						label: "Linux服务器",
					},
					{
						value: "Network",
						label: "Network",
					},
					{
						value: "AIX",
						label: "AIX",
					},
					{
						value: "Monitor",
						label: "Monitor",
					},
					{
						value: "",
						label: "全部",
					},
				],
				Linkvalue: "",
				Levelvalue: "",
				Typevalue: "",
				SearchIP: "",
				SearchIPOptions: [],
			};
		},
		computed: {
			tableDataFn() {
				let data = this.tableData.filter((item) => {
					return (
						item.connectstate.includes(this.Linkvalue) &&
						item.maxAlertlevel.includes(this.Levelvalue) &&
						item.IP.includes(this.SearchIP) &&
						item.type.includes(this.Typevalue)
					);
				});
				this.postData.dataTotal = data.length;
				return data;
			},
		},
		methods: {
			// tableRowClassName({ row, rowIndex }) {
			//   if (row.maxAlertlevel === "2") {
			//     return "warning-row";
			//   } else if (row.maxAlertlevel === "0") {
			//     return "success-row";
			//   } else if (row.maxAlertlevel === "3") {
			//     return "error-row";
			//   }
			// },
			rowDblclick(row, column, event) {
				// console.log(row);
				this.$router.push({
					name: "CountwarningPanel",
					params: {
						// nodeType: command.nodeType,
						level: Number(row.maxAlertlevel),
						IP: row.IP,
					},
				});
				let os_type = "";
				switch (row.type) {
					case "Oracle":
					case "SQLServer":
					case "Mysql":
						os_type = "dbalertlist";
						break;
					case "Linux":
					case "Windows":
					case "AIX":
						os_type = "osalertlist";
						break;
					case "Network":
					case "Monitor":
						os_type = "netalertlist";
						break;
					default:
						os_type = "";
				}
				bus.$emit("handCommand", {
					nodeType: os_type,
					level: Number(row.maxAlertlevel),
					IP: row.IP,
				});
			},
			async viewItemMonitor(value) {
				let routerTo = "";
				switch (value.type) {
					case "Oracle":
						routerTo = "ItemMonitorDataBaseOracle";
						break;
					case "SQLServer":
						routerTo = "ItemMonitorDataBaseSQLServer";
						break;
					case "Mysql":
						routerTo = "ItemMonitorDataBaseMysql";
						break;
					case "Linux":
					case "Windows":
					case "AIX":
						routerTo = "ItemMonitorServer";
						break;
					case "Network":
					case "Monitor":
						routerTo = "ItemMonitorNetwork";
						break;
					default:
						routerTo = "ItemMonitorDataBaseOracle";
				}
				// this.$router.push({
				//   name: routerTo,
				//   params: {
				//     MONID: value.MONID,
				//     IP: value.IP,
				//     ITEM: value,
				//   },
				// });
				await this.toNewWindow(value, routerTo)

			},
			async viewItemchart(value) {
				console.log("跳转",value)
				let routerTo = "";
				switch (value.type) {
					case "Oracle":
						routerTo = "dashBoardOracle";
						break;
					case "SQLServer":
						routerTo = "dashBoardSqlserver";
						break;
					case "Mysql":
						routerTo = "dashBoardMysql";
						break;
					case "Linux":
					case "Windows":
					case "AIX":
						routerTo = "dashBoardServer";
						break;
					case "Network":
					case "Monitor":
						// console.log(value)
						routerTo = "dashBoardInternet";
						break;
				}
				// this.$router.push({
				//   name: routerTo,
				//   params: {
				//     MONID: value.MONID,
				//     IP: value.IP,
				//     ITEM: value,
				//   },
				// });
				await this.toNewWindow(value, routerTo)
			},
			async toNewWindow(value, routerTo) {
				await AddItem(value.MONID, value).then(_ => {
					if (value.type == "Linux") {
						sessionStorage.removeItem('ISWindows')
					} else {
						sessionStorage.setItem('ISWindows', 'true')
					}
					if (value.connType == "snmp") {
						sessionStorage.setItem('ISSNMP', 'true')
					} else {
						sessionStorage.removeItem('ISSNMP')
					}
					sessionStorage.setItem('PushId', _)
				}).catch(e => {
					console.log(e)
				})
				let routeUrl = await this.$router.resolve({
					name: routerTo,
					query:value
				});
				await window.open(routeUrl.href, "_blank");
			},
			getTableData() {
				getNodeUsability({
						pageNum: this.postData.curPage,
						pageSize: this.postData.pageSize,
					})
					.then((_) => {
						if (_) {
							this.postData.dataTotal = Number(Object.keys(_)[0]);
							this.tableData = Object.values(_)[0].map((item) => {
								return {
									MONID: item.monid,
									IP: item.ip,
									type: item.type,
									connectstate: item.connectstate === null ? "O" : item.connectstate,
									maxAlertlevel: item.maxAlertlevel,
									systemname: item.systemname,
									DB_SID: item.dbsid,
									connType: item.connType
								};
							});
							this.SearchIPOptions = [];
							new Set(this.tableData.map((_) => _.IP)).forEach((item, index) => {
								this.SearchIPOptions.push({
									value: item,
									label: index + "-" + item,
								});
							});
						}
					})
					.catch((_) => {
						console.log(_);
					});
			},
			getPaginationCurPage(val) {
				this.postData.curPage = val;

				this.getTableData();
			},
			getPaginationPageSize(val) {
				// 分页大小改变之后，重置当前页码为 1
				this.postData.curPage = 1;
				this.postData.pageSize = val;

				this.getTableData();
			},
		},
	};
</script>

<style scope>
	.el-table .warning-row {
		background: oldlace;
	}

	.el-table .success-row {
		background: #f0f9eb;
	}

	.el-table .error-row {
		background: #ffb5b5;
	}

	.el-table thead {
		color: black;
	}

	/* .el-table__row {
  cursor: pointer;
} */
	/* .bgContainer {
  background: #f4f6f9;
  padding: 15px;
  height: 87vh;
  overflow-y: scroll;
} */
	.nodeContainer {

		box-shadow: 0 0 5px #d0d0d0;
		padding-bottom: 20px;
		border-radius: 5px;
	}

	.nodeHeader {

		border-bottom: 2px solid #d0d0d0;
		padding: 15px;
		background: #fff;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px
	}

	.nodeHeader:first-child {
		padding-left: 15px;
	}
</style>
